<template>
  <div style="width:100%;height:100%"></div>
</template>
<script>
import { getFuncGroupPtjMessage } from "../../../../service/workbenchApi";

export default {
  data() {
    return {
      dataName: [],
      dataNum: []
    };
  },
  methods: {
    getData() {
      // 各职能组的项目数统计（管理职能组，管理员查看）
      getFuncGroupPtjMessage().then(res => {
        if (res.code == 0) {
          let obj = res.data;
          this.dataName = Object.keys(obj);
          this.dataNum = Object.values(obj);
          this.drawBar1();
        }
      });
    },
    drawBar1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = this.$echarts.init(document.querySelector(".now .bar1"));
      myChart1.setOption({
        // 图标位置
        grid: {
          top: "0%",
          left: "30%",
          bottom: "10%"
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            show: true,
            data: this.dataName,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#8F9399",

              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#8F9399",
                  borderRadius: 40,
                  align: "center",
                  width: 50,
                  height: 50
                }
              }
            }
          },
          {
            show: true,
            inverse: true,
            data: this.dataNum,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#8F9399"
              }
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: this.dataNum,
            barCategoryGap: 50,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: "#00B98D"
              }
            },
            label: {
              normal: {
                show: false
                // position: "inside",
                // formatter: "{c}"
              }
            }
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barCategoryGap: 50,
            // 当前外框最大数为50 后期可改
            data: [50, 50, 50, 50, 50, 50, 50],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#ccc",
                borderWidth: 1,
                barBorderRadius: 15
              }
            }
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart1.resize();
      });
    }
  },
  mounted() {
    this.drawBar1();
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
</style>